<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
        }

        ul{
            counter-reset: counter;
        }

        li::before{
            counter-increment: counter;
            content: counters(counter, "-")" ";
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<ul>
    <li>
        <span>第一单元
            <span class="evt1">--子目录-</span><span class="evt2">-同级目录--</span>
        </span>
    </li>
</ul>

<button class="btn">HTML结构</button>
</body>
<script>
    //son
    $("ul").on('click','.evt1',function (e) {
        $(this).parent().append("<ul><li><span>新目录<span class='evt1'>--子目录-</span><span class='evt2'>-同级目录--</span></span></li></ul>");
        e.stopPropagation();
    });
    //brother
    $("ul").on('click','.evt2',function (e) {
        $(this).parent().parent().after("<li><span>新目录<span class='evt1'>--子目录-</span><span class='evt2'>-同级目录--</span></span></li>");
        e.stopPropagation();
    });

    $('.btn').click(function () {
        alert($('ul').html());
    })
</script>
</html>